<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="light" class="pub-hearder">
        <ion-buttons slot="start">
          <ion-back-button text=""></ion-back-button>
        </ion-buttons>
        <ion-buttons slot="end">
          <span>跳过</span>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div class="main-page">
        <div class="title">Hi，您现在是</div>
        <div class="desc">我们将为您推荐合适的学习内容</div>
        <div class="grad" v-for="(item, index) in gradData" :key="index">
            <div class="grad-name"
                ><label
                    class="arc"
                    :style="{ borderColor: '#CA3032' }"
                ></label
                >{{ item.name }}</div
            >
            <div class="child">
                <div
                    v-for="(item1, index) in item.children"
                    :key="index"
                    @click="gradChange(item1)"
                    :style="{
                        color: params.gradId === item1.id ? '#fff' : '#333',
                        background:
                            params.gradId === item1.id
                                ? '#CA3032'
                                : '#f3f5f7'
                    }"
                >
                    {{ item1.value }}
                </div>
            </div>
        </div>
    </div>
    </ion-content>
    <ion-footer>
      <ion-toolbar  class="pub-hearder">
        <button ion-button block @click="login()">选好了 立即进入</button>
      </ion-toolbar>
    </ion-footer>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonContent, IonInput, IonItem, IonList, alertController, IonHeader, IonToolbar, IonButtons, IonBackButton, IonFooter } from '@ionic/vue';
import { personOutline, lockClosedOutline } from 'ionicons/icons';
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { PublicService } from '@/utils/public';
const publicService = new PublicService();
export default {
  name: 'login-page',
  components: {
    IonPage, IonContent, IonHeader, IonToolbar, IonButtons, IonBackButton, IonFooter
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    let t: any;
    const state = reactive({
      params: {
          gradId: 1,
          province: '四川省',
          city: '成都市',
          area: '武侯区'
      },
      height: window.innerHeight,
      gradData: [
                {
                    name: '小学',
                    children: [
                        {
                            value: '一年级',
                            id: 1
                        },
                        {
                            value: '二年级',
                            id: 2
                        },
                        {
                            value: '三年级',
                            id: 3
                        },
                        {
                            value: '四年级',
                            id: 4
                        },
                        {
                            value: '五年级',
                            id: 5
                        },
                        {
                            value: '六年级',
                            id: 6
                        }
                    ]
                },
                {
                    name: '初中',
                    children: [
                        {
                            value: '初一',
                            id: 7
                        },
                        {
                            value: '初二',
                            id: 8
                        },
                        {
                            value: '初三',
                            id: 9
                        }
                    ]
                },
                {
                    name: '高中',
                    children: [
                        {
                            value: '高一',
                            id: 10
                        },
                        {
                            value: '高二',
                            id: 11
                        },
                        {
                            value: '高三',
                            id: 12
                        }
                    ]
                }
            ]
    })

    function gradChange(data: { id: number; value: string }) {
            state.params.gradId = data.id
        }

   


    return {
      ...toRefs(state),
      gradChange
    }
  }
}
</script>
<style lang="scss" scoped>
.main-page {
    padding: 20px;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    .title {
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        font-size: 24px;
        color: #333333;
    }
    .desc {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #939699;
        margin-top: 5px;
    }
    .grad-name {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 15px;
        color: #333333;
        margin: 15px 0px 7px;
        .arc {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: #ffffff;
            border: 4px solid #fff;
            border-radius: 50%;
            margin-right: 8px;
            position: relative;
            top: -3px;
        }
    }
    .child {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        div {
            background: #f3f5f7;
            border-radius: 15px;
            height: 30px;
            font-size: 12px;
            color: #333333;
            letter-spacing: 0;
            text-align: center;
            line-height: 30px;
        }
    }
    .input {
        width: 100%;
        height: 80px;
        background: #f3f5f7;
        border-radius: 30px;
        position: relative;
        image {
            width: 22px;
            height: 22px;
            position: relative;
            top: 10px;
            left:15px;
        }
        label.txt {
            position: relative;
            left: 20px;
            top: 5px;
        }
        .position {
            position: absolute;
            right: 20px;
            top: 10px;
        }
    }
}
button {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    color: #fff;
    background: #CA3032;
    margin-bottom: 10px;
    img{
      width: 20px;
      margin-right: 5px;
      vertical-align: middle;
    }
  }
</style>